import { createFileRoute } from '@tanstack/react-router'
import { motion } from 'framer-motion'
import section1Des from '@/assets/images/home/section1-des.webp'
import section2Icon1 from '@/assets/images/home/section2-icon1.svg'
import section2Icon2 from '@/assets/images/home/section2-icon2.svg'
import section2Paibian from '@/assets/images/home/section2-paibian.webp'
import logo from '@/assets/images/logo.svg'

export const Route = createFileRoute('/_no-auth/')({
  component: Index,
})

function Index() {
  return (
    <div className={'layout_top bg-main min-h-screen overflow-hidden'}>
      {/*  section1 */}
      <div
        className={
          "layout bg-[url('@/assets/images/home/section1-bg.webp')]" +
          ' 3xl:pt-44 bg-[size:100%_20rem] bg-no-repeat pt-9 pb-12 lg:bg-cover lg:pt-32 lg:pb-36' +
          " 3xl:pb-48 lg:flex lg:items-center lg:justify-between lg:bg-[url('@/assets/images/home/section1-bg-pc.webp')]"
        }
      >
        <motion.div
          initial={{ opacity: 0, x: -80 }}
          whileInView={{ opacity: 1, x: 0 }}
          transition={{ duration: 1 }}
          className={'3xl:w-[43%] lg:w-[40%]'}
        >
          <h3
            className={
              'text-primary-foreground 3xl:text-2xl flex items-center justify-start text-sm lg:text-base'
            }
          >
            <img className={'3xl:w-24 mr-1 w-10'} src={logo} alt='logo' />{' '}
            新佰时-脑电生物技术：科创成果 价值运营
          </h3>
          <h1
            className={
              'text-primary layout-h1 leading-line-1 relative inline-block pb-1 before:absolute before:right-0 before:bottom-0' +
              ' lg:pb-3' +
              ' before:bg-black' +
              ' before:h-[0.0625rem]' +
              ' before:left-0' +
              ' font-bold'
            }
          >
            数字量化健康管理 <br />
            项目孵化连锁运营
          </h1>
          <p
            className={
              'leading-line21 mt-2 text-xs text-black lg:mt-3' + ' lg:text-sm'
            }
          >
            Digital Quantitative Health Management Project Incubation Chain
            Operation
            <br />
            New BNT-EEG Biotechnology: Operation of Science and Technology
            Innovation Achievements Project
          </p>
          <ul
            className={
              'leading-line-1 lg:leading-line-2 3xl:text-xl mt-2 text-xs text-black lg:text-base'
            }
          >
            <li>运营项目1：CCBT 少年儿童大脑优势发展与体质管理中心</li>
            <li>运营项目2：MSPA 自愈力健康管理 (情绪内分泌免疫调节)</li>
          </ul>
        </motion.div>
        <motion.div
          initial={{ opacity: 0, x: 80 }}
          whileInView={{ opacity: 1, x: 0 }}
          transition={{ duration: 1 }}
          className={'mt-32 lg:mt-0'}
        >
          <img
            className={'3xl:w-[34rem] lg:w-[30rem]'}
            src={section1Des}
            alt='CCBT'
          />
        </motion.div>
      </div>
      {/*  section2 */}
      <div className={'layout text-primary 3xl:py-28 pb-20 lg:py-24'}>
        <div className={'text-center'}>
          <motion.h2
            initial={{ opacity: 0, y: -80 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 1 }}
            className={'leading-line-1 layout-h2 font-bold'}
          >
            强脑教育战略合作 (领头扬科技)
          </motion.h2>
          <motion.div
            initial={{ opacity: 0, y: 80 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 1 }}
          >
            <p
              className={
                'leading-line-1 3xl:text-4xl mt-2 text-base lg:text-2xl'
              }
            >
              领头扬湾区战略合作运营机构-广州新佰时
            </p>
            <p className={'leading-line-1 3xl:text-4xl text-base lg:text-2xl'}>
              领头扬PSD-AI 情绪可视化检测反馈技术
            </p>
            <p className={'leading-line-1 3xl:text-4xl text-base lg:text-2xl'}>
              领头扬弱磁场检测系统与方法：细胞生物测控技术
            </p>
          </motion.div>
        </div>
        <div
          className={
            '3xl:mt-[6.25rem] lg:mt-20 lg:flex lg:flex-row-reverse lg:items-center lg:justify-between'
          }
        >
          <motion.div
            initial={{ opacity: 0, x: 80 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 1 }}
          >
            <img
              className={
                '3xl:w-[31.25rem] 3xl:h-[20.8125rem] mt-6 mb-12 h-[13.5625rem] w-full lg:h-[20.8125rem] lg:w-[31.25rem]'
              }
              src={section2Paibian}
              alt='Paibian'
            />
          </motion.div>
          <motion.ul
            initial={{ opacity: 0, x: -80 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 1 }}
            className={'space-y-4 lg:w-1/2 lg:text-start'}
          >
            <li className={'lg:flex lg:items-center lg:justify-between'}>
              <img
                className={
                  '3xl:w-[11.25rem] 3xl:mr-[3.875rem] mx-auto w-[5.625rem] lg:mr-[2rem] lg:w-[7.25rem]'
                }
                src={section2Icon1}
                alt='BrainCo 国内脑机接口领域独角兽'
              />
              <div className={'flex-1'}>
                <h3
                  className={
                    'leading-line-1 3xl:text-2xl my-3 text-center text-base font-bold lg:text-start lg:text-xl'
                  }
                >
                  BrainCo 国内脑机接口领域独角兽
                </h3>
                <p className={'leading-line-1 3xl:text-2xl text-xs lg:text-xl'}>
                  Brain
                  强脑科技致力于脑机接口技术底层技术的突破，通过在大脑和外部设备之间建立信号传达通路实现两者信息交换的方式......
                </p>
              </div>
            </li>
            <li className={'lg:flex lg:items-center lg:justify-start'}>
              <img
                className={
                  '3xl:w-[11.25rem] 3xl:mr-[3.875rem] mx-auto w-[5.625rem] lg:mr-[2rem] lg:w-[7.25rem]'
                }
                src={section2Icon2}
                alt='EAs-Brain 领头扬-科技赋能运营'
              />
              <div className={'flex-1'}>
                <h3
                  className={
                    'leading-line-1 3xl:text-2xl my-3 text-center text-base font-bold lg:text-start lg:text-xl'
                  }
                >
                  EAs-Brain 领头扬-科技赋能运营
                </h3>
                <p className={'leading-line-1 3xl:text-2xl text-xs lg:text-xl'}>
                  领头扬科技是一家专注于人工智能、脑机接口技术及数字化
                  解决方案的高科技企业......
                </p>
              </div>
            </li>
          </motion.ul>
        </div>
      </div>
    </div>
  )
}
